<template>
    <!-- 用户基本信息 -->
    <div class="section">
      <div class="section-header">
        <h3 class="section-title">基本信息</h3>
        <el-button type="primary" @click="openEditDialog" class="submit-btn">编辑个人信息</el-button>
      </div>
        <el-card class="user-card">
        <el-row align="middle" gutter={20}>
          <el-col :span="6" class="avatar-col">
            <el-avatar size="large" :src="require('@/assets/img.png')" />
          </el-col>
          <el-col :span="18">
            <div class="user-info">
              <h4 class="user-name">{{ user.name }}</h4>
              <p class="user-phone">电话：{{ user.phone }}</p>
              <p class="user-address">地址：{{ user.address}}</p>
            </div>
          </el-col>
        </el-row>

      </el-card>
    </div>

    <!-- 用户信息的选项卡 -->
    <el-tabs v-model="activeTab" class="section">
      <!-- 我的收藏选项卡 -->
      <el-tab-pane label="我的收藏" name="favorites">
        <div class="tab-content">
          <el-table :data="user.favoriteRestaurants" stripe>
            <el-table-column prop="name" label="餐厅名称"></el-table-column>
            <el-table-column prop="rating" label="评分">
              <template v-slot="scope">
                <el-rate v-model="scope.row.rating" disabled></el-rate>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button @click="deleteRestaurant(scope.row)" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 历史记录选项卡 -->
      <el-tab-pane label="历史记录" name="history">
        <div class="tab-content">
          <el-table :data="user.history" stripe>
            <el-table-column prop="action" label="操作"></el-table-column>
            <el-table-column prop="date" label="时间"></el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button @click="deleteHistory(scope.row)" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

  <!-- 编辑个人信息的弹框 -->
  <el-dialog
      title="编辑个人信息"
      v-model="editDialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :show-close="false"
  >
    <el-form :model="editForm" ref="editForm" label-width="100px">
      <el-form-item label="姓名">
        <el-input
            v-model="editForm.name"
            class="input-style"
            placeholder="请输入姓名"
        ></el-input>
      </el-form-item>

      <el-form-item label="电话">
        <el-input
            v-model="editForm.phone"
            class="input-style"
            placeholder="请输入手机号码"
        ></el-input>
      </el-form-item>

      <el-form-item label="地址">
        <el-input
            v-model="editForm.address"
            class="input-style"
            placeholder="请输入地址"
        ></el-input>
      </el-form-item>

      <el-form-item label="头像">
        <el-upload
            class="upload-avatar"
            action="#"
            :on-change="handleAvatarChange"
            :show-file-list="false"
        >
          <el-button
              size="small"
              class="upload-button"
          >更改头像</el-button>
        </el-upload>
      </el-form-item>
    </el-form>

    <div class="dialog-footer">
      <el-button
          @click="editDialogVisible = false"
          class="cancel-button"
      >取消</el-button>
      <el-button
          type="primary"
          @click="submitEdit"
          class="save-button"
      >保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      user: {
        name: "夏小柿",
        phone: "1234567",
        address: "安徽省滁州市",
        favoriteRestaurants: [
          { name: "餐厅A", rating: 4.5 },
          { name: "餐厅B", rating: 4.7 },
          { name: "餐厅C", rating: 4.2 },
          { name: "餐厅D", rating: 4.3 },
          { name: "餐厅E", rating: 4.8 },
          { name: "餐厅F", rating: 4.9 },
        ],
        history: [
          { action: "评论了餐厅A", date: "2024-11-25" },
          { action: "收藏了餐厅B", date: "2024-11-22" },
          { action: "点赞餐厅C", date: "2024-11-20" },
          { action: "评论餐厅D", date: "2024-11-18" },
          { action: "收藏餐厅E", date: "2024-11-15" },
          { action: "评论了餐厅A", date: "2024-11-25" },
          { action: "收藏了餐厅B", date: "2024-11-22" },
          { action: "点赞餐厅C", date: "2024-11-20" },
          { action: "评论餐厅D", date: "2024-11-18" },
          { action: "收藏餐厅E", date: "2024-11-15" },
        ]
      },
      activeMenu: "2", // 设置默认选中项
      activeTab: "favorites", // 设置默认选中的选项卡
      // 确保 editForm 初始化为对象且包含对应的字段
      editForm: {
        name: '',
        email: '',
        avatar: '',
      },
      editDialogVisible: false,
    };
  },
  methods: {
    // 打开编辑个人信息对话框
    openEditDialog() {
      this.editDialogVisible = true;
      this.editForm.name = this.user.name;
      this.editForm.email = this.user.email;
      this.editForm.avatar = this.user.avatar || '';
    },
    // 提交编辑的个人信息
    submitEdit() {
      this.user.name = this.editForm.name;
      this.user.phone = this.editForm.phone;
      this.user.address = this.editForm.address;
      this.user.avatar = this.editForm.avatar;
      this.editDialogVisible = false;
      this.$message.success('个人信息已更新');
    },
    // 处理头像上传
    handleAvatarChange(file) {
      const reader = new FileReader();
      reader.onload = () => {
        this.editForm.avatar = reader.result;
      };
      reader.readAsDataURL(file.raw);
    },
    // 删除餐厅
    deleteRestaurant(restaurant) {
      const index = this.user.favoriteRestaurants.indexOf(restaurant);
      if (index !== -1) {
        this.user.favoriteRestaurants.splice(index, 1);
        this.$message.success(`${restaurant.name} 已删除`);
      }
    },
    // 隐藏历史记录
    hideHistory(record) {
      record.isHidden = true;
      this.$message.success(`历史记录已隐藏`);
    },
    // 删除历史记录
    deleteHistory(record) {
      const index = this.user.history.indexOf(record);
      if (index !== -1) {
        this.user.history.splice(index, 1);
        this.$message.success(`历史记录已删除`);
      }
    },
  },
};
</script>

<style scoped>
.user-page {
  padding: 20px;
  background-color: #FFF7E1; /* 浅黄色背景，具有食欲感 */
  border-radius: 10px;
}

.section {
  padding: 20px;
  margin-bottom: 30px;
  background-color: #FFF7E1; /* 浅黄色背景，具有食欲感 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  margin: 0;
  font-size: 18px;
}

.aside {
  background-color: #FFDDC1; /* 桃红色 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.menu {
  margin-top: 20px;
  padding: 20px;
  background-color: #FFE6CC; /* 温暖的浅橙色 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.menu:hover {
  background-color: #FFD1BA; /* 悬停时的渐变背景 */
}

.main-content {
  padding: 30px;
  background-color: #FFE6CC; /* 温暖的浅橙色 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-left: 20px;
}

.section-title {
  font-size: 24px;
  color: #D65F5F; /* 热情的红色 */
  margin-bottom: 20px;
}

.el-table th {
  background-color: #FFD1BA; /* 更加温暖的表头背景色 */
  color: #FF5733;
}

.tab-content {
  height: 250px; /* 让 tab 内容区域占满父容器的高度 */
  width: 100%; /* 让 tab 内容区域宽度填满容器 */
  overflow: auto; /* 启用滚动条 */
  padding: 0;
  transition: none; /* 禁用过渡 */
}

/* 优化卡片 */
.user-card {
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 自适应布局 */
.avatar-col {
  text-align: center;
}

/* 卡片样式 */
.user-card {
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* 头像列样式 */
.avatar-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 用户信息样式 */
.user-info {
  padding-left: 20px;
}

/* 用户姓名 */
.user-name {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

/* 邮箱样式 */
.user-email {
  font-size: 16px;
  color: #888;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-name {
    font-size: 18px;
  }

  .user-email {
    font-size: 14px;
  }
}

.submit-btn {
  margin-top: 10px;
  background-color: #FF7043; /* 深橙色 */
  color: white;
  border-color: #FF7043;
}

.submit-btn:hover {
  background-color: #FF5733; /* 更加鲜艳的橙红色 */
  border-color: #FF7043;
}

/* 表单输入框 */
.input-style {
  border: 1px solid #FF5733;  /* 输入框边框 */
  border-radius: 4px;         /* 输入框圆角 */
  padding: 8px;               /* 输入框内边距 */
}

.input-style:focus {
  border-color: #FF5733;      /* 输入框聚焦时边框颜色 */
  box-shadow: 0 0 0 2px rgba(255, 87, 51, 0.3); /* 聚焦时阴影效果 */
}

/* 上传头像按钮 */
.upload-button {
  border: 1px solid #FF5733;  /* 按钮边框 */
  border-radius: 4px;         /* 按钮圆角 */
  background-color: #FF5733;  /* 按钮背景色 */
  color: white;               /* 按钮文字颜色 */
  padding: 6px 12px;          /* 按钮内边距 */
}

.upload-button:hover {
  background-color: #D94F28;  /* 鼠标悬停时按钮背景色 */
  color: white;
  border-color: #D94F28;
}

.cancel-button {
  background-color: #f0f0f0; /* 取消按钮背景色 */
  border: 1px solid #ccc;    /* 取消按钮边框 */
  color: #333;                /* 取消按钮文字颜色 */
}

.cancel-button:hover {
  background-color: #e8e8e8; /* 鼠标悬停时背景色 */
}

.save-button {
  background-color: #FF5733; /* 保存按钮背景色 */
  border: 1px solid #FF5733; /* 保存按钮边框 */
  color: white;              /* 保存按钮文字颜色 */
}

.save-button:hover {
  background-color: #D94F28; /* 鼠标悬停时保存按钮背景色 */
  border-color: #D94F28;
}

/* 弹框底部按钮区域 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
}
</style>
